<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="toHome" @click="toHome">
        <van-icon name="wap-home-o" />
      </div>
      <div class="wyyx">网易严选</div>
      <div class="toSearch" @click="toSearch">
        <van-icon name="search" />
      </div>
      <div class="toBuy" @click="toCart">
        <van-icon name="shopping-cart-o" />
      </div>
    </div>
    <!-- logo大图 -->
    <div class="bigLogo">
      <img class="bigImg" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    </div>

    <!--  账号密码输入框 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 输入手机号 -->
        <van-field
          v-model="phone"
          :rules="[
            { required: true, message: '请填写用户名' },
            { pattern: phoneReg, message: '手机号验证不合法' }
          ]"
          required
          :clearable="true"
          type="number"
          label="账号"
          placeholder="请输入手机号"
          colon
        />
        <!-- 输入验证码 -->
        <van-field
          type="number"
          label="验证码"
          :clearable="true"
          placeholder="请输入验证码"
          colon
          v-model="code"
          :rules="[
            { required: true, message: '请填写验证码' },
            { pattern: codeReg, message: '验证码必须为6位数字!' }
          ]"
        >
          <!-- 获取验证码 -->
          <template #button>
            <van-button size="small" type="danger" @click="getCode">获取验证码</van-button>
          </template>
        </van-field>
        <!-- 请输入密码 -->
        <van-field
          label="登录密码"
          placeholder="请输入密码"
          :clearable="true"
          type="password"
          colon
          v-model="password"
          :rules="[
            { required: true, message: '请填写密码' },
            { pattern: pwdReg, message: '密码为6到21位英文、数字、下划线!' }
          ]"
        />
        <!-- 请确认密码 -->
        <van-field
          label="确认密码"
          :clearable="true"
          placeholder="请输入密码"
          colon
          v-model="repassword"
          type="password"
          name="repassword"
          :rules="[
            { required: true, message: '请再次填写密码' },
            { validator, message: '确认密码必须与之前密码一致!' }
          ]"
        />
        <van-field name="checkbox" :rules="[{ required: true, message: '请确认用户协议' }]">
          <template #input>
            <van-checkbox v-model="isAgree" icon-size="14px" shape="square"> 同意协议并注册《网易严选用户协议》 </van-checkbox>
          </template>
        </van-field>
      </van-cell-group>
      <!--  完成注册去center -->
      <div style="margin: 16px">
        <van-button round block type="danger" native-type="submit"> 点击完成注册 </van-button>
      </div>
      <van-dialog v-model:showDialog="showDialog" show-cancel-button>
        <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
      </van-dialog>
    </van-form>
    <!-- 去登录 -->
    <div class="reg" @click="toLogin">我有账号去登录 ></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Register'
})
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reqGetCode, reqRegister } from '@/api/center'
import { ref } from 'vue'
import { phoneReg, codeReg, pwdReg } from '@/utils/server'
import { showDialog } from 'vant'

const router = useRouter()

// 定义请求数据
let phone = ref('')
let password = ref('')
let code = ref('')

//  定义重复密码
let repassword = ref('')
// 定义是否同意协议
let isAgree = ref(false)
const validator = (vale: any) => vale === password.value

// 完成注册
const onSubmit = async () => {
  const res = await reqRegister(phone.value, password.value, code.value)
  // @ts-ignore
  if (res.code === 200) {
    showDialog({
      message: '恭喜您注册成功'
    }).then(() => {
      router.push('/login')
    })
    // @ts-ignore
  } else if (res.code === 206) {
    showDialog({
      message: '验证码错误'
    }).then(() => {
      password.value = ''
      code.value = ''
      repassword.value = ''
    })
  } else {
    showDialog({
      message: '该手机号已被注册'
    }).then(() => {
      phone.value = ''
      password.value = ''
      code.value = ''
      repassword.value = ''
    })
  }
}

// 去登录
const toLogin = () => {
  router.push('/login')
}
//  获取验证码
const getCode = async () => {
  password.value = ''
  code.value = ''
  repassword.value = ''
  if (phone.value !== '') {
    const res = await reqGetCode(phone.value)

    code.value = res.data
    console.log('这是您的验证码' + ':' + res.data)
  }
}

const onFailed = (errorInfo: any) => {
  console.log('failed', errorInfo)
}

// 去主页
const toHome = () => {
  router.push('/home')
}
// 去购物车
const toCart = () => {
  router.push('/shopCart')
}
// 去搜索
const toSearch = () => {
  router.push('/search')
}
</script>

<style scoped lang="less">
.container {
  height: 100vh;
  background-color: #f2f5f4;
  .header {
    height: 44px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    .toHome {
      width: 24px;
      height: 24px;
      margin: 0 15px;
    }
    .wyyx {
      height: 27px;
      line-height: 27px;
      text-align: center;
      font-size: 20px;
      margin: 0 auto;
      font-weight: 999;
    }
    .toBuy {
      margin: 0 15px;
    }
  }
  .bigLogo {
    margin: auto;
    margin-top: 50px;
    margin-bottom: 30px;
    width: 134px;
    height: 45px;
    .bigImg {
      width: 100%;
      height: 100%;
    }
  }
  .reg {
    width: 120px;
    text-align: center;
    font-size: 14px;
    margin: auto;
    margin-top: 50px;
  }
}
</style>
